﻿<UserControl x:Class="Music.WidgetControl"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             Grid.ColumnSpan="2">
    <UserControl.Resources>
        <ControlTemplate x:Key="Prev" TargetType="Button">
            <Grid>
                <Image Name="Image" Source="Resources/prev.png" Opacity="0.8"/>
            </Grid>
            <ControlTemplate.Triggers>
                <Trigger Property="IsMouseOver" Value="True">
                    <Setter TargetName="Image" Property="Opacity" Value="1"/>
                </Trigger>
                <Trigger Property="IsPressed" Value="True">
                    <Setter TargetName="Image" Property="Source" Value="Resources/prev.png"/>
                </Trigger>
            </ControlTemplate.Triggers>
        </ControlTemplate>
        <ControlTemplate x:Key="PlayPause" TargetType="ToggleButton">
            <Grid>
                <Image Name="Image" Source="Resources/play.png" Opacity="0.8"/>
            </Grid>
            <ControlTemplate.Triggers>
                <Trigger Property="IsMouseOver" Value="True">
                    <Setter TargetName="Image" Property="Opacity" Value="1"/>
                </Trigger>
                <Trigger Property="IsPressed" Value="True">
                    <Setter TargetName="Image" Property="Source" Value="Resources/play.png"/>
                </Trigger>
                <Trigger Property="IsChecked" Value="True">
                    <Setter TargetName="Image" Property="Source" Value="Resources/pause.png"/>
                </Trigger>
                <MultiTrigger>
                    <MultiTrigger.Conditions>
                        <Condition Property="IsChecked" Value="True"/>
                        <Condition Property="IsPressed" Value="True"/>
                    </MultiTrigger.Conditions>
                    <Setter TargetName="Image" Property="Source" Value="Resources/pause.png"/>
                </MultiTrigger>
            </ControlTemplate.Triggers>
        </ControlTemplate>
        <ControlTemplate x:Key="Next" TargetType="Button">
            <Grid>
                <Image Name="Image" Source="Resources/next.png" Opacity="0.8"/>
            </Grid>
            <ControlTemplate.Triggers>
                <Trigger Property="IsMouseOver" Value="True">
                    <Setter TargetName="Image" Property="Opacity" Value="1"/>
                </Trigger>
                <Trigger Property="IsPressed" Value="True">
                    <Setter TargetName="Image" Property="Source" Value="Resources/next.png"/>
                </Trigger>
            </ControlTemplate.Triggers>
        </ControlTemplate>
    </UserControl.Resources>
    <UserControl.Triggers>
        <EventTrigger RoutedEvent="UserControl.MouseEnter">
            <BeginStoryboard>
                <Storyboard>
                    <DoubleAnimation Storyboard.TargetName="ControlsPanel" Storyboard.TargetProperty="Opacity" To="1" Duration="0:0:0.3"/>
                </Storyboard>
            </BeginStoryboard>
        </EventTrigger>
        <EventTrigger RoutedEvent="UserControl.MouseLeave">
            <BeginStoryboard>
                <Storyboard>
                    <DoubleAnimation Storyboard.TargetName="ControlsPanel" Storyboard.TargetProperty="Opacity" To="0" Duration="0:0:0.3"/>
                </Storyboard>
            </BeginStoryboard>
        </EventTrigger>
    </UserControl.Triggers>
    <Grid>
        <Image Name="AlbumArt" Stretch="UniformToFill"/>
        <StackPanel Name="ControlsPanel" Orientation="Horizontal" HorizontalAlignment="Center" VerticalAlignment="Bottom">
            <Button Name="Prev" Template="{StaticResource Prev}" Width="40" Height="40"/>
            <ToggleButton Name="PlayPause" Template="{StaticResource PlayPause}" Width="40" Height="40"/>
            <Button Name="Next" Template="{StaticResource Next}" Width="40" Height="40"/>
        </StackPanel>
        <TextBlock Foreground="White" Text="Music" FontSize="14" HorizontalAlignment="Left" VerticalAlignment="Bottom" Margin="10,0,0,10"/>
    </Grid>
</UserControl>
